import {ref} from "vue";
// @ts-ignore
import {DrawData, NodeElement} from "./components/hada-canvas-poster/HadaCanvasPosterH5.vue";
import {getDrawDataNodes} from "./pageData";

export const alignLineNodes = ref<NodeElement[][]>([[],[],[],[],[],[]]);


//显示线的误差允许值
const diff = 3;

//获取旋转后的left top width height
export function getRevolveLeftTopWidthHeight(node: NodeElement) {

    //旋转后的left top width height
    const angle = node.css.angle;
    //计算出旋转前的四个顶点 然后旋转各个顶点，计算出最大x 最小x 最大y 最小y
    const [left, top, width, height] = [node.css.left, node.css.top, node.width, node.height];
    const points= [];
    points.push([left, top]);
    points.push([left + width, top]);
    points.push([left + width, top + height]);
    points.push([left, top + height]);
    if(node.css.angle === 0){
        return [node.css.left, node.css.top, node.width, node.height];
    }
    // console.log('旋转前的四个顶点',node.css.left,node.css.top,node.width,node.height);
    const angleRadians = angle * Math.PI / 180;
    const center = {
        x: left + width / 2,
        y: top + height / 2
    }
    points.forEach(point=>{
        const [x, y] = point;
        // 旋转角度 转弧度
        // 将待判断的位置点绕旋转中心逆时针旋转回原始矩形的方向
        const rotatedPoint = {
            x: center.x + (x - center.x) * Math.cos(-angleRadians) - (y - center.y) * Math.sin(-angleRadians),
            y: center.y + (x - center.x) * Math.sin(-angleRadians) + (y - center.y) * Math.cos(-angleRadians)
        };
        point[0] = rotatedPoint.x;
        point[1] = rotatedPoint.y;
    })
    //计算最大x 最小x 最大y 最小y
    const maxX = Math.max(...points.map(point=>point[0]));
    const minX = Math.min(...points.map(point=>point[0]));
    const maxY = Math.max(...points.map(point=>point[1]));
    const minY = Math.min(...points.map(point=>point[1]));
    // console.log('旋转后的四个顶点',minX, minY, maxX - minX, maxY - minY);
    return [minX, minY, maxX - minX, maxY - minY];
}


function isShowVerticalMiddleLine(cNode: NodeElement, canvasWidthHeight: {width:number,height:number}, cshowNode: NodeElement) {
    //是否到达中心
    if(cNode.css.left + cshowNode.width/2 >= canvasWidthHeight.width/2 - diff
        && cNode.css.left + cshowNode.width/2 <= canvasWidthHeight.width/2 + diff){
        cNode.css.left = (canvasWidthHeight.width - cshowNode.width)/2;
        return true;
    }
    return false;
}

const moveDirection: {
    lastMoveX: number;
    lastMoveY: number;
    x: 'left' | 'right';
    y:  'top' | 'bottom';
} = {
    lastMoveX: 0,
    lastMoveY: 0,
    x: 'left',
    y: 'top',
}
function isShowLeftLine(cNode: NodeElement, showNode: NodeElement,cshowNode: NodeElement,moveX:number,moveY:number) {

    //对齐元素左边
    if(showNode.css.left >= cNode.css.left  - diff && showNode.css.left <= cNode.css.left + diff){
        cNode.css.left = showNode.css.left;
        return true;
    }
    //对象元素右边
    if(showNode.css.left + showNode.width >= cNode.css.left - diff && showNode.css.left + showNode.width <= cNode.css.left + diff){
        cNode.css.left = showNode.css.left + showNode.width;
        return true;
    }

    return false;
}

function isShowRightLine(cNode: NodeElement, item: NodeElement, cshowNode: NodeElement) {
    //对齐元素左边
    // const rightLine = cNode.css.left + cshowNode.width;
    // if(rightLine >= item.css.left - diff && rightLine <= item.css.left + diff){
    //     cNode.css.left = item.css.left - cshowNode.width;
    //     return true;
    // }
    // if(rightLine >= item.css.left + item.width - diff && rightLine <= item.css.left + item.width + diff){
    //     cNode.css.left = item.css.left + item.css.width - cshowNode.width;
    //     return true;
    // }
    //对象元素右边
    if(item.css.left >= cNode.css.left + cshowNode.width - diff && item.css.left <= cNode.css.left + cshowNode.width + diff){
        cNode.css.left = item.css.left - cshowNode.width;
        return true;
    }
    //对象元素右边
    if(item.css.left + item.width >= cNode.css.left + cshowNode.width - diff && item.css.left + item.width <= cNode.css.left + cshowNode.width + diff){
        cNode.css.left = item.css.left + item.width - cshowNode.width;
        return true;
    }
    return false;
}

function isShowHorizontalMiddleLine(cNode: NodeElement, canvasWidthHeight: {width: any; height: any}, cshowNode: NodeElement) {
    //是否到达中心
    if(cNode.css.top + cshowNode.height/2 >= canvasWidthHeight.height/2 - diff
        && cNode.css.top + cshowNode.height/2 <= canvasWidthHeight.height/2 + diff){
        cNode.css.top = (canvasWidthHeight.height - cshowNode.height)/2;
        return true;
    }
    return false;
}

function isShowTopLine(cNode: NodeElement, showNode: NodeElement) {
    //是否显示水平顶部线
    if(showNode.css.top >= cNode.css.top - diff && showNode.css.top <= cNode.css.top + diff){
        cNode.css.top = showNode.css.top;
        return true;
    }
    //对象元素右边
    if(showNode.css.top + showNode.height >= cNode.css.top - diff && showNode.css.top + showNode.height <= cNode.css.top + diff){
        cNode.css.top = showNode.css.top + showNode.height;
        return true;
    }
    return false;
}

function isShowBottomLine(cNode: NodeElement, item: NodeElement, cshowNode: NodeElement) {
    //对齐元素左边
    if(item.css.top >= cNode.css.top + cshowNode.height - diff && item.css.top <= cNode.css.top + cshowNode.height + diff){
        cNode.css.top = item.css.top - cshowNode.height;
        return true;
    }
    //对象元素右边
    if(item.css.top + item.height >= cNode.css.top + cshowNode.height - diff && item.css.top + item.height <= cNode.css.top + cshowNode.height + diff){
        cNode.css.top = item.css.top + item.height - cshowNode.height;
        return true;
    }
    return false;
}

/**
 * 左边线对齐中心线
 * @param cNode
 * @param param2
 */
function isShowLeftMiddleLine(cNode: NodeElement, canvasWidthHeight: { width: number; height: number }) {
    //是否到达中心
    if(cNode.css.left  >= canvasWidthHeight.width/2 - diff
        && cNode.css.left  <= canvasWidthHeight.width/2 + diff){
        cNode.css.left = (canvasWidthHeight.width)/2;
        return true;
    }

    if(cNode.css.left >= 0 - diff && cNode.css.left <= 0 + diff){
        cNode.css.left = 0;
        return true;
    }
    return false;
}

function isShowRightMiddleLine(cNode: NodeElement, canvasWidthHeight: {width: number; height: number},cshowNode) {
    //是否到达中心
    if(cNode.css.left + cshowNode.width  >= canvasWidthHeight.width/2 - diff
        && cNode.css.left + cshowNode.width  <= canvasWidthHeight.width/2 + diff){
        cNode.css.left = canvasWidthHeight.width/2 - cshowNode.width;
        return true;
    }
    if(cNode.css.left + cshowNode.width >= canvasWidthHeight.width - diff && cNode.css.left + cshowNode.width <= canvasWidthHeight.width + diff){
        cNode.css.left = canvasWidthHeight.width - cshowNode.width;
        return true;
    }
    return false;
}

function isShowTopMiddleLine(cNode: NodeElement, canvasWidthHeight: { width: number; height: number }) {
    //是否到达中心
    if(cNode.css.top  >= canvasWidthHeight.height/2 - diff
        && cNode.css.top  <= canvasWidthHeight.height/2 + diff){
        cNode.css.top = (canvasWidthHeight.height)/2;
        return true;
    }
    if(cNode.css.top >= 0 - diff && cNode.css.top <= 0 + diff){
        cNode.css.top = 0;
        return true;
    }
    return false;
}

function isShowBottomMiddleLine(cNode: NodeElement, canvasWidthHeight: { width: number; height: number }, cshowNode: NodeElement) {
    //是否到达中心
    if(cNode.css.top + cshowNode.height  >= canvasWidthHeight.height/2 - diff
        && cNode.css.top + cshowNode.height  <= canvasWidthHeight.height/2 + diff){
        cNode.css.top = canvasWidthHeight.height/2 - cshowNode.height;
        return true;
    }
    if (cNode.css.top + cshowNode.height >= canvasWidthHeight.height - diff && cNode.css.top + cshowNode.height <= canvasWidthHeight.height + diff) {
        cNode.css.top = canvasWidthHeight.height - cshowNode.height;
        return true;
    }
    return false;
}

export function alignLineRun(currentNodeElements: NodeElement[],showNodeElements: NodeElement[],drawData: DrawData,moveX:number,moveY:number) {
    alignLineNodes.value[0] = [];
    alignLineNodes.value[1] = [];
    alignLineNodes.value[2] = [];
    alignLineNodes.value[3] = [];
    alignLineNodes.value[4] = [];
    alignLineNodes.value[5] = [];
    if(currentNodeElements.length > 0){
        if(moveX - moveDirection.lastMoveX > 0){
            moveDirection.x = 'right';
        }
        if(moveX - moveDirection.lastMoveX < 0){
            moveDirection.x = 'left';
        }
        if(moveY - moveDirection.lastMoveY > 0){
            moveDirection.y = 'bottom';
        }
        if(moveY - moveDirection.lastMoveY < 0){
            moveDirection.y = 'top';
        }
        moveDirection.lastMoveX = moveX;
        moveDirection.lastMoveY = moveY;
        const cNode = currentNodeElements[0];
        const cshowNode = showNodeElements.find(i=>i.id === cNode.id);
        let drawDataNodes = getDrawDataNodes();
        console.log(drawDataNodes,'drawDataNodes');
        drawDataNodes.forEach(item=>{
            if(item.id !== cNode.id){
                const showNode = showNodeElements.find(i=>i.id === item.id);
                if(isShowLeftLine(cNode,showNode,cshowNode,moveX,moveY)){
                    alignLineNodes.value[0].push(item);
                }
                if(isShowRightLine(cNode,showNode,cshowNode)){
                    alignLineNodes.value[2].push(item);
                }
                if(isShowTopLine(cNode,showNode)){
                    alignLineNodes.value[3].push(item);
                }
                if(isShowBottomLine(cNode,showNode,cshowNode)){
                    alignLineNodes.value[5].push(item);
                }
            }
        })
        if(isShowLeftMiddleLine(cNode,{width:drawData.width,height: drawData.height})){
            alignLineNodes.value[0].push(null);
        }

        if(isShowRightMiddleLine(cNode,{width:drawData.width,height: drawData.height},cshowNode)){
            alignLineNodes.value[2].push(null);
        }

        if(isShowTopMiddleLine(cNode,{width:drawData.width,height: drawData.height})){
            alignLineNodes.value[3].push(null);
        }

        if(isShowBottomMiddleLine(cNode,{width:drawData.width,height: drawData.height},cshowNode)){
            alignLineNodes.value[5].push(null);
        }

        if(isShowVerticalMiddleLine(cNode,{width:drawData.width,height: drawData.height},cshowNode)){
            alignLineNodes.value[1].push(null);
        }
        if(isShowHorizontalMiddleLine(cNode,{width:drawData.width,height: drawData.height},cshowNode)){
            alignLineNodes.value[4].push(null);
        }
        moveDirection.lastMoveX = moveX;
        moveDirection.lastMoveY = moveY;
    }
}
